<template>
  <div class="mine">
    <div class="bg">
      <van-icon name="setting-o" color="white" />
      <van-icon name="user" />
      <p>{{ 123 }}</p>
    </div>
    <div class="order">
      <div class="title">
        <span>我的订单</span>
        <span>全部订单<span>></span></span>
      </div>
      <div class="order-icon">
        <div>
          <van-icon name="paid" />
          <i>待付款</i>
        </div>
        <div>
          <van-icon name="send-gift-o" />
          <i>待发货</i>
        </div>
        <div>
          <van-icon name="logistics" />
          <i>待收货</i>
        </div>
        <div>
          <van-icon name="shield-o" />
          <i>已完成</i>
        </div>
      </div>
    </div>
    <div class="counter">
      <div class="title">
        <span>我的优惠券</span>
        <span>全部优惠券<span>></span></span>
      </div>
      <div class="counter-icon">
        <div>
          <van-icon name="coupon-o" />
          <i>待使用</i>
        </div>
        <div>
          <van-icon name="credit-pay" />
          <i>已完成</i>
        </div>
        <div>
          <van-icon name="debit-pay" />
          <i>已过期</i>
        </div>
      </div>
    </div>
    <div class="tab">
      <div class="tab-item">
        <div>
          <span><van-icon name="star-o" /></span> <span>我的收藏</span>
        </div>
        <span>></span>
      </div>
      <div class="tab-item">
        <div>
          <span><van-icon name="location-o" /></span> <span>收货地址</span>
        </div>
        <span>></span>
      </div>
      <div class="tab-item">
        <div>
          <span><van-icon name="service-o" /></span> <span>服务中心</span>
        </div>
        <span>></span>
      </div>
    </div>
  </div>
</template>

<script setup>
import getUser from '@/api/user'
import { onMounted } from 'vue'

showToast({ message: '登录成功' })

onMounted(async () => {
  let res = await getUser()
  // console.log(res)
})
</script>

<style scoped>
.mine {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background-color: #f1f1f1;
}
.bg {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f00;
  align-items: flex-end;
  gap: 10px;
}
.van-icon-setting-o {
  font-size: 30px;
}
.van-icon-user {
  font-size: 50px;
  margin: 0 auto;
}
.bg p {
  margin: 0 auto;
}
.order {
  width: 100%;
  background-color: white;
}
.title {
  width: 90%;
  margin: 0 auto;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
}
.order-icon {
  display: flex;
  justify-content: space-evenly;
}
.order-icon div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.van-icon {
  font-size: 25px;
}
.counter {
  width: 100%;
  background-color: white;
}
.counter-icon {
  display: flex;
  justify-content: space-evenly;
}
.counter-icon div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tab {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.tab-item {
  width: 90%;
  margin: auto;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border: 1px solid #000; */
}
</style>
